<template>
  <div style="height:100%;">
    <div style="height:17%;">
      <el-form ref="elForm"
               :inline="true"
               size="medium"
               label-width="100px">
        <el-form-item label="项目"
                      prop="project_id">
          <el-select v-model="formProjectData.project_id"
                     placeholder="请选择项目"
                     @change="selectService(formProjectData.project_id)"
                     filterable
                     clearable>
            <el-option v-for="item in projectList"
                       :key="item.id"
                       :label="item.project_name"
                       :value="item.id"
                       :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务"
                      prop="service_id">
          <el-select v-model="formServiceData.service_id"
                     placeholder="请选择服务"
                     @change="selectVersion(formServiceData.service_id)"
                     filterable
                     clearable>
            <el-option v-for="item in serviceList"
                       :key="item.id"
                       :label="item.service_name"
                       :value="item.id"
                       :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本"
                      prop="version_id">
          <el-select v-model="formVersionData.version_name"
                    style="width:300px"
                     multiple
                     collapse-tags
                     placeholder="请选择版本"
                     @change=""
                     filterable
                     clearable
                     :disabled="formServiceData.service_id===''?true:false">
            <el-option v-for="item in versionList"
                       :key="item.id"
                       :label="item.version_name"
                       :value="item.version_name"
                       :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>

        <el-button type="primary"
                   @click="selectCaseAll()">查询</el-button><br>
        <!-- <el-form-item label="服务分支"
                      prop="branch">
          <el-select v-model="formData.branch"
                     placeholder="请选择分支"
                     @change=""
                     filterable
                     clearable
                     :disabled="formData.versionAll===false && formData.version === ''?true:false">
            <el-option v-for="(item, index) in branchList"
                       :key="index"
                       :label="item.name"
                       :value="index"
                       :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button class="bt"
                     type="primary"
                     size="medium"
                     @click="test_interface()"
                     :disabled="formData.branch === ''?true:false"
                     :loading="loadingbut"> {{loadingbuttext}} </el-button>
        </el-form-item>
      </el-form>
      </el-row>
    </div>
    <div style="height:80%;">
      <el-table :data="caseList"
                @selection-change="handleRow"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                height="100%">
        <el-table-column type="selection"
                         width="55"></el-table-column>
        <el-table-column type="expand"
                         label="更多">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-form-item label="接口域名:">
                <span>{{ props.row.case_path }}</span>
              </el-form-item><br>
              <el-form-item label="接口URL:">
                <span>{{ props.row.case_url }}</span>
              </el-form-item><br>
              <el-form-item label="接口请求类型:">
                <span>{{ props.row.case_method }}</span>
              </el-form-item><br>
              <el-form-item label="接口请求参数:">
                <span v-if="props.row.case_request_data.includes('{')">
                  <json-viewer :value="JSON.parse(props.row.case_request_data)"
                               expand-depth=3
                               expanded
                               theme=jv-light
                               sort></json-viewer>
                </span>
                <span v-else>{{props.row.case_request_data}}</span>
                <!-- <span>{{ props.row.case_request_data }}</span> -->
              </el-form-item><br>
              <el-form-item label="接口检查点:">
                <span v-if="props.row.case_check.includes('{')">
                  <json-viewer :value="JSON.parse(props.row.case_check)"
                               expand-depth=2
                               expanded
                               theme=jv-light
                               sort></json-viewer>
                </span>
                <span v-else>{{props.row.case_check}}</span>
                <!-- <span>{{ props.row.case_check }}</span> -->
              </el-form-item><br>
              <el-form-item label="接口响应参数提取:">
                <span>{{ props.row.case_relation_param }}</span>
              </el-form-item><br>
              <el-form-item label="接口关联编号:">
                <span>{{ props.row.case_relation_id }}</span>
              </el-form-item><br>
              <el-form-item label="模板参数:">
                <span>{{ props.row.template_param }}</span>
              </el-form-item><br>
              <el-form-item label="SQL结果断言:">
                <span>{{ props.row.template_check }}</span>
              </el-form-item><br>
              <el-form-item label="SQL结果提取:">
                <span>{{ props.row.template_relation_param }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用例编号"
                         prop="case_id"> </el-table-column>
        <el-table-column label="用例名称"
                         prop="case_name"> </el-table-column>
        <el-table-column label="SQL模板"
                         prop="template_name">
          <template slot-scope="{ row }">
            {{ row.template_name || '空' }}
          </template>
        </el-table-column>
        <el-table-column label="是否运行"
                         prop="case_on_off"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import app from "@/api/interface";

const cuccessStutas = [
  {
    success: "true",
    success_name: "通过",
  },
  {
    success: "false",
    success_name: "失败",
  },
];

export default {
  data() {
    return {
      // 加载
      loadingbut: false,
      loadingbuttext: "开始执行",
      username: "",
      formData: {
        person: "",
        service: "",
        version: "",
        branch: "",
        versionAll: false,
        project: "忠诚度管理",
      },
      formProjectData: {
        project_id: "",
        project_name: "",
      },
      formServiceData: {
        person: "",
        service_id: "",
        service_name: "",
      },
      formVersionData: {
        version_id: [],
        version_name: [],
      },

      branchList: [],
      serviceList: [],
      versionList: [],
      targeturl: [],
      caseList: [],
      fileList: [],
      countData: [],
      scanResult: [],
      projectList: [],
      projectList: [],
      serviceList: [],
      versionList: [],
      selectDataList: [],
    };
  },
  mounted() {
    this.selectProject();
    this.getUserName();
  },
  methods: {
    // 多选获取参数
    handleRow(selectData) {
      this.selectDataList = selectData;
    },
    // 执行用例
    test_interface() {
      let caseList = [];
      if (
        (this.selectDataList.length == this.caseList.length) |
        (this.selectDataList.length == 0)
      ) {
        caseList = this.caseList;
      } else {
        caseList = this.selectDataList;
      }
      ((this.loadingbut = true), (this.loadingbuttext = "正在执行中")),
        this.$axios
          .post("/test_interface/", {
            project_id: this.formProjectData.project_id,
            service_id: this.formServiceData.service_id,
            version_name: this.formVersionData.version_name,
            username: this.username,
            caseList,
          })
          .then((res) => {
            if (res.status === 200) {
              this.projectList = res.data;
              this.loadingbut = false;
              this.routparam(res.data);
            }
          });
    },
    getUserName() {
      this.$axios.get("/getsession/user/").then((res) => {
        if (res.data.code == 1) {
          this.username = res.data.user;
        } else {
          this.$router.replace("/");
        }
      });
    },
    // 页面数据传递
    routparam(caseresp) {
      this.$router.push({
        name: "caseReport",
        params: { caseresp: caseresp },
      });
    },

    // 查询项目
    selectProject() {
      this.formData = [];
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },

    selectService() {
      this.$axios.get("/selectService/").then((res) => {
        if (res.status === 200) {
          console.log(this.formData.person);
          this.serviceList = res.data;
        }
      });
    },

    selectVersion(service_id) {
      console.log(this.serviceList[service_id]["id"]);
      this.$axios
        .get("/selectVersion/", {
          params: { service_id: this.serviceList[service_id]["id"] },
        })
        .then((res) => {
          this.versionList = res.data;
        });
    },

    UploadSuccessRead() {
      (this.targeturl = []),
        this.$axios.get("/readExcelCase/").then((res) => {
          this.caseList = res.data;
          this.saveCase();
        });
    },
    saveCase() {
      (this.targeturl = []),
        this.$axios.get("/saveCase/", {
          params: {
            version_id: this.versionList[this.formData.version]["id"],
            service_id: this.serviceList[this.formData.service]["id"],
          },
        });
    },

    // 获取brach
    getBranch() {
      this.$axios
        .get("/selectBranch/", {
          params: {
            service_name: this.serviceList[this.formData.service]["service"],
          },
        })
        .then((res) => {
          this.branchList = res.data.data;
        });
    },

    // 扫描项目
    getScanJava() {
      this.$axios
        .get("/scanJava/", {
          params: {
            service_name: this.serviceList[this.formData.service]["service"],
            branch_name: this.branchList[this.formData.branch]["name"],
          },
        })
        .then((res) => {
          console.log("结果>>>>>>", res.data);
          this.scanResult = res.data;
        });
    },

    // 查询服务
    selectService(project_id) {
      this.$axios
        .get("/serviceVersion/", { params: { project_id: project_id } })
        .then((res) => {
          if (res.status === 200) {
            console.log(this.formData.person);
            this.serviceList = res.data;
          }
        });
    },
    // 查询版本
    selectVersion(service_id) {
      this.$axios
        .get("/select_version/", { params: { service_id: service_id } })
        .then((res) => {
          this.versionList = res.data;
        });
    },
    // 查询用例
    selectCaseAll() {
      this.caseList = [];
      this.$axios
        .post("/selectCaseAll/", {
          project_id: this.formProjectData.project_id,
          service_id: this.formServiceData.service_id,
          version_name: this.formVersionData.version_name,
        })
        .then((res) => {
          this.caseList = res.data;
        });
    },
  },
};
</script>
<style>
</style>
